<template>
  <jc-bar prve-btn @prve="prve">
    <v-spacer></v-spacer>
    <span class="text-title">我的歌单</span>
    <v-spacer></v-spacer>
    <v-btn icon @click="sheet = !sheet" aria-label="创建歌单"><j-icon size="20">mdi-plus</j-icon></v-btn>
  </jc-bar>

  <div v-if="list.length == 0">
    <v-spacer></v-spacer>
    <v-col :cols="12" :sm="6" class="mx-auto">
      <jc-emty>
        <div class="text-subtitle">暂无数据</div>
        <v-btn variant="outlined" class="font-weight-bold mt-4 text-white" @click="sheet = !sheet">创建歌单</v-btn>
      </jc-emty>
    </v-col>
    <v-spacer></v-spacer>
  </div>
  <div v-else class="h-full] overflow-auto">
    <ge-dan-list :list="list" @removeitem="handleGetList"></ge-dan-list>
  </div>

  <new-gen-dan :visbale="sheet" @jcchange="handleSheetChange" @submit="handleGetList"></new-gen-dan>
</template>

<script>
import JcBar from "@/layout/JcBar";
import JcEmty from "@/jcui/JcEmty/emty.vue";
import NewGenDan from "@/components/NewGenDan";
import GeDanList from "@/components/GeDanList";
import { gedanController } from "@/api/cloudbase-user-action-log";

export default {
  name: "MyGeDan",
  components: {
    JcBar,
    JcEmty,
    NewGenDan,
    GeDanList,
  },
  data() {
    return {
      list: [],
      sheet: false,
      selectedItem: 0,
    };
  },
  activated() {
    this.handleGetList();
  },
  methods: {
    handleSheetChange(visble) {
      this.sheet = visble;
    },
    handleGetList() {
      this.$jcLoading.show();
      gedanController
        .get()
        .then((data) => {
          this.list = data;
        })
        .catch(() => {
          this.$toast.error("出错了");
        })
        .finally(() => {
          this.$jcLoading.close();
        });
    },
    prve() {
      this.$router.push({ path: "/" });
    },
  },
};
</script>
<style scoped></style>
